<template>
    <view class="container">
        <view>
            <desc-wrapper :title="title" :desc="desc"></desc-wrapper>

           <!-- <z-card>
                <view style="height: 36rpx"></view>			
			     <u-swiper
			                       height="300"
			                       :list="images"
			                       previousMargin="30"
			                       nextMargin="30"
			                       circular
			                       :autoplay="false"
			                       radius="5"
			                       bgColor="#ffffff"			   					
			                       @change="swChange"
			                       @click="swClick"
			                   >					   
			                   </u-swiper>					
                <view class="flex-row justify-center enhance-text" style="margin: 30rpx auto 10rpx auto">现在是第{{ curIndex+1 }}张卡牌</view>
            </z-card> -->
			
			<z-card style='height: 850rpx;'>
				<swiper :autoplay="false" style="height: 700rpx; width: 90%; margin: 0 auto;margin-top: 30rpx;"  @change="swChange" >
				  <swiper-item v-for="(card, index) in images" :key="index" style="height: 700rpx; width: 100%; margin: 0 auto; border-radius: 20rpx;" @click="swClick(index)">
				    <view class="card-background" :style="{ backgroundImage: `url(${card})` }">
				    </view>
				  </swiper-item>
				</swiper>
				<view class="flex-row justify-center enhance-text" style="margin: 30rpx auto 10rpx auto">现在是第{{ curIndex+1 }}张卡牌</view>
			</z-card>
        </view>
        <u-tabbar :value="value1" @change="change1" inactive-color="#7C8491" activeColor="#275515" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false">
            <u-tabbar-item v-for="(item, idx) in tabList" :text="item.labelText" @click="navigatorTo">
                <image class="u-page__item__slot-icon" slot="active-icon" :src="item.activeIconPath"></image>
                <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
            </u-tabbar-item>
        </u-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: '一张牌占卜-抽牌',
            desc: '占卜方法：牌已洗好，请保持虔诚，抽取一张牌，并查看内容，自行体会其中的吉凶指示。',
            value1: 1,
            tabList: [
                {
                    labelText: '首页',
                    url: '/pages/tabbar/home',
                    iconPath: '/static/image/tabbar/tabbar1.png',
                    activeIconPath: '/static/image/tabbar/activetabbar1.png'
                },
                {
                    labelText: '论坛',
                    url: '/pages/tabbar/forum',
                    iconPath: '/static/image/tabbar/tabbar2.png',
                    activeIconPath: '/static/image/tabbar/activetabbar2.png'

                    // activeIconPath: '/static/image/tabbar/activetabbar2.png'
                },
                {
                    labelText: '客服',
                    url: '/pages/tabbar/service',
                    iconPath: '/static/image/tabbar/tabbar3.png',
                    activeIconPath: '/static/image/tabbar/activetabbar3.png'
                },
                {
                    labelText: '我的',
                    url: '/pages/tabbar/mine',
                    iconPath: '/static/image/tabbar/tabbar4@3x.png',
                    activeIconPath: '/static/image/tabbar/activetabbar4@3x.png'
                }
            ],
            list1: [],
			image:Array(9).fill(''),
            images: Array(9).fill(''),
            curIndex: 0,
            form: {
                taluo_id: 1
                // taluo_inverse:0,//塔罗牌正逆 例：0正位 1逆位
            }
        }
    },
   onLoad(opt) {
       console.log(opt,'传递过来的值');
       let paramsObj = JSON.parse(opt.params); // 解析 params 属性为对象
       console.log(paramsObj);
       
       for (const k in paramsObj) {
           if (!isNaN(paramsObj[k])) {
               this.list1.push(paramsObj[k]);
			   
           } else {
               this.images.fill(paramsObj[k]);
           }
       }
	   console.log(this.list1,'洗牌后的值')
       this.form.taluo_id = this.list1.join(','); // 使用逗号分隔多个值，可以根据需要更改分隔符
	   console.log(this.images,"images")
   },
   
    methods: {
        /* swChange(e) {
            this.curIndex = e.current.current
        }, */ 
		 swChange(e) {
		        this.curIndex = e.detail.current; // 使用 e.detail.current 获取当前索引
		    },
        swClick(index) {
			console.log(this.list1[index])
			const formDataValue = String(this.list1[index]); // 或者 `${this.list1[index]}`			
			    uni.navigateTo({
			        url: `/pages/taluopai/detailtwo?formData=${formDataValue}`
			    });
        }, 
		/* swClick: function(index) {
		        console.log(this.list1[index]);
		        const formDataValue = String(this.list1[index]);
		        uni.navigateTo({
		            url: `/pages/taluopai/detailtwo?formData=${formDataValue}`
		        });
		    }, */
        change1(e) {
            console.log(e)
            uni.switchTab({
                url: this.tabList[e].url
            })
        }
    }
}
</script>

<style lang="scss">
::v-deep .u-page__item__slot-icon {
    margin-top: 10rpx;
}

::v-deep .u-tabbar-item__text {
    font-size: 20rpx;
    line-height: normal;
    margin-top: 3px;
}

.u-page__item__slot-icon {
    width: 48rpx;
    height: 48rpx;
}
// ::v-deep .card-wrapper {
//     transform: translateY(-90rpx) !important;
// }
 .card-background {
    height: 800rpx;
    width: 100%;
    margin-top: -60rpx;
    background-size: cover; /* 可根据需要调整，cover 表示尽量填充容器，保持纵横比 */
    background-position: center; /* 可根据需要调整，使背景图居中显示 */
  }
</style>
